<template>
    <div>
      <form action="" @submit.prevent="on">
        用户名<input type="text" v-model="name">
        <input type="file" id="img">
        <select v-model="role">
          <option v-for="i in roles" :value="i.id">{{i.name}}</option>
        </select>
        <input type="submit" value="添加">
      </form>
    </div>
</template>

<script>
  import axios from 'axios'
    export default {
        name: "add_user",
      data:function () {
        return{
          name:"",
          role:"",
          roles:""
        }
      },
      methods:{
          on(){
            let form_data = new FormData();
            form_data.append('name',this.name);
            form_data.append('img',document.getElementById('img').files[0]);
            form_data.append('role',this.role);
            axios({
              url:"http://127.0.0.1:8000/add_user/",
              method:"post",
              data:form_data
            }).then(res=>{
              let code=res['data']['code'];
              console.log(res);
              if (code==201){
                alert('重复')
              }
              else {
                alert('成功')
              }
            })
          }
      },
      mounted() {
          axios({
            url:"http://127.0.0.1:8000/show_role/",
            method:"get",
          }).then(res=>{
            this.roles=res.data.roles

          })
      }
    }
</script>

<style scoped>

</style>
